<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端轮播图</title>
    <style>
        * {
            border: 0;
            padding: 0;
            margin: 0;
        }

        div {
            position: relative;
            height: 260px;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        div ul {
            width: 500%;
            overflow: hidden;
            position: absolute;
            left: -100%;

        }

        div ul li {
            width: 20%;
            float: left;
            list-style-type: none;
        }

        img {
            width: 100%;
            height: 260px;
            border-style: none;
        }

        .focus ol {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }

        .focus ol li {
            float: left;
            width: 5px;
            height: 5px;
            background-color: red;
            list-style: none;
            margin-right: 4 px;
            transition: all .3s;
        }
    </style>
</head>

<body>
    <div class="focus">
        <ul>
            <li><img src="../动画原理/3.jpg" alt=""></li>
            <li><img src="../动画原理/1.jpg" alt=""></li>
            <li><img src="../动画原理/2.jpg" alt=""></li>
            <li><img src="../动画原理/3.jpg" alt=""></li>
            <li><img src="../动画原理/1.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        var focus = document.querySelector('.focus')
        var ul = focus.children[0]
        // 获取focus 的宽度
        var w = focus.offsetWidth
        var ol = focus.children[1]

        // 利用定时器自动轮播图片
        var index = 0
        var timer = setInterval(function () {
            index++
            var translatex = -index * w
            ul.style.transition = 'all .3s'
            ul.style.transition = 'translateX(' + translatex + 'px)'
        }, 2000)
        // 等着过度完了之后 再去判断 监听过度完成的事件 transitionend
        ul.addEventListener('transitionend', function () {
            // 无缝滚动
            if (index >= 3) {
                index = 0
                // 去掉过度效果 快速调到目标位置
                ul.style.transition = 'none'
                var translatex = -index * w
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
            if (index < 0) {
                index = 2
                ul.style.transition = 'none'
                // 利用最新的索引号乘以宽度 去滚动图片
                var translatex = -index * w
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
            // 小圆点跟着变化
            // 把ol里面li带有current类名的选出来去掉类名 remove
            ol.querySelector('.current').classList.remove('current')
            // 让当前索引号 的小li 加上current add
            ol.children[index].classList.add('current')
        })
        // 手指滑动轮播图
        // 触摸元素 touchstart 获取手指初始坐标
        var startX = 0
        var moveX = 0  //后面要使用变量 所以定义为全局变量
        var flag = false 
        ul.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX
            // 手指触摸停止定时器
            clearInterval(timer)
        })
        // 移动手指 touchmove 计算手指滑动距离 并且移动盒子
        ul.addEventListener('touchmove', function (e) {
            // 计算滑动距离
            moveX = e.targetTouches[0].pageX - startX
            // 移动盒子：  盒子原来的位置 + 手指移动的距离
            var translatex = - index * w + moveX
            // 手指拖动的时候不需要取消过度效果
            ul.style.transition = 'none'
            ul.style.transform = 'translateX(' + translatex + 'px)';
            flag = true//手指移动过再去判断 否则不做处理
            e.preventDefault()  //阻止屏幕滚动行为
        })
        // 手指离开 根据手指滑动距离判断是回弹还是播放上一张还是下一张
        ul.addEventListener('touchend', function (e) {
            // 如果J距离大于50px 我们就播放上下一张
            if (flag = true) {
                if (Math.abs(moveX) < 50) {
                    // 如果右滑 moveX大于0
                    if (moveX > 0) {
                        index--
                    }
                    // 如果左滑 moveX 小于0
                    else {
                        index++
                    }
                    var translatex = -index * w
                    ul.style.transition = 'all .3s'
                    ul.style.transform = 'translateX(' + translatex + 'px)'
                }
            }
            else {
                var translatex = -index * w;
                ul.style.transition = 'all .1s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
            // 手指离开重新开启定时器
            clearInterval(timer)
            timer = setInterval(function () {
                index++
                var translatex = -index * w
                ul.style.transition = 'all .3s'
                ul.style.transition = 'translateX(' + translatex + 'px)'
            }, 2000)
        })
    </script>
</body>

</html>